<template>
  <el-container>
    <el-header>
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <img src="@/assets/logo.png" alt />
            <span class="systemtitle">教室资源管理系统后台</span>
          </div>
        </el-col>

        <el-col :span="7" :offset="11">
          <div class="center-operation">
            <span>
              <span>
                <el-dropdown @command="handleCommand" split-button type="primary">
                  {{adminName}}
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1" icon="el-icon-user">个人资料</el-dropdown-item>
                    <el-dropdown-item command="2" icon="el-icon-edit">修改密码</el-dropdown-item>
                    <el-dropdown-item command="3" icon="el-icon-close">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>

              <el-badge class="badge-icon-01" :value="nonInspectCount" type="primary">
                <el-tooltip class="item" effect="dark" content="待审核信息" placement="top">
                  <router-link to="/order?applystatus=0" tag="span">
                    <el-button icon="el-icon-chat-dot-round" circle></el-button>
                  </router-link>
                </el-tooltip>
              </el-badge>

              <el-badge class="badge-icon-02" :value="rejectCount" type="primary">
                <el-tooltip class="item" effect="dark" content="已驳回信息" placement="top">
                  <router-link to="/order?applystatus=2" tag="span">
                    <el-button type="warning" icon="el-icon-chat-round" circle></el-button>
                  </router-link>
                </el-tooltip>
              </el-badge>
            </span>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse?'64px':'170px'">
        <el-button circle type="primary" @click="isfolder" class="folder" size="mini">
          <i v-if="isCollapse" class="el-icon-caret-right"></i>
          <i v-else="isCollapse" class="el-icon-caret-left"></i>
        </el-button>

        <el-menu
          unique-opened
          :collapse="isCollapse"
          background-color="#313743"
          text-color="#fff"
          active-text-color="#409EFF"
          :collapse-transition="false"
        >
          <el-menu-item index="0">
            <i class="el-icon-s-home"></i>
            <span>
              <router-link to="/welcome" tag="span">首页</router-link>
            </span>
          </el-menu-item>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-reading"></i>
              <span>公告管理</span>
            </template>
            <el-menu-item index="5-1">
              <router-link to="/notice" tag="span">公告列表</router-link>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-timer"></i>
              <span>资源管理</span>
            </template>
            <el-menu-item index="2-1">
              <router-link to="/classroomlist" tag="span">教室列表</router-link>
            </el-menu-item>
            <el-menu-item index="2-2">
              <router-link to="/course" tag="span">课程安排</router-link>
            </el-menu-item>
            <el-menu-item index="2-3">
              <router-link to="/cla" tag="span">班级管理</router-link>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message-solid"></i>
              <span>预定管理</span>
            </template>
            <el-menu-item index="1-1">
              <router-link to="/order" tag="span">预定列表</router-link>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="3-1">
              <router-link to="/managerlist" tag="span">用户列表</router-link>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>权限管理</span>
            </template>
            <el-menu-item index="4-1">
              <router-link to="/role" tag="span">角色列表</router-link>
            </el-menu-item>
            <el-menu-item index="4-2">
              <router-link to="/permission" tag="span">权限列表</router-link>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

    <!-- 密码修改 -->
    <div>
      <el-dialog
        modal
        top="120px"
        width="32%"
        @close="closeDialog"
        title="密码修改"
        :visible="openDialogVisible"
        :before-close="handleClose"
      >
        <el-form
          label-position="right"
          :rules="rules"
          ref="ruleForm"
          :model="managerVO"
          label-width="80px"
        >
          <el-form-item prop="mgPwd" label="旧密码">
            <el-input
              placeholder="原始密码"
              clearable
              v-model="managerVO.mgPwd"
              class="form-input"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item prop="newPwd01" label="新密码">
            <el-input
              type="password"
              placeholder="请输入新密码"
              clearable
              v-model="managerVO.newPwd01"
              class="form-input"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="newPwd02" label="再次输入">
            <el-input
              show-password
              placeholder="再次输入新密码"
              type="password"
              clearable
              v-model="managerVO.newPwd02"
              class="form-input"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="medium" type="primary" @click="updatePwd('ruleForm')">确 定</el-button>
          <el-button size="medium" @click="openDialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 个人资料 -->

    <el-drawer title="个人资料" :visible.sync="drawer" :direction="direction" size="25%">
      <div>
        <el-divider content-position="left">
          <el-tag>ID</el-tag>
        </el-divider>
        <h4 class="manager-info" v-text="manager.mgId"></h4>

        <el-divider content-position="left">
          <el-tag type="info">登录名</el-tag>
        </el-divider>
        <h4 class="manager-info" v-text="manager.mgName"></h4>

        <el-divider content-position="left">
          <el-tag type="info">管理员姓名</el-tag>
        </el-divider>
        <h4 class="manager-info" v-text="manager.realName"></h4>

        <el-divider content-position="left">
          <el-tag type="warning">手机号</el-tag>
        </el-divider>
        <h4 class="manager-info" v-text="manager.mgMobile"></h4>

        <el-divider content-position="left">
          <el-tag type="error">邮箱</el-tag>
        </el-divider>
        <h4 class="manager-info" v-text="manager.mgEmail"></h4>

        <el-divider content-position="left">
          <el-tag type="warning">角色</el-tag>
        </el-divider>
        <h4 class="manager-info" v-text="manager.roleName"></h4>

        <el-divider content-position="left">
          <el-tag type="info">描述</el-tag>
        </el-divider>
        <h4 class="manager-info" v-text="manager.roleDesc"></h4>
      </div>
    </el-drawer>
  </el-container>
</template>

<script>
export default {
  inject: ["reload"],
  name: "Home",
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(resp => {
          this.openDialogVisible = false;
          done();
        })
        .catch(resp => {});
    },
    closeDialog() {
      this.openDialogVisible = false;
    },
    updatePwd(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          this.$http
            .put("/manager/modifiedPwd", this.managerVO)
            .then(resp => {
              let { data } = resp;
              let { msg, code } = data;
              if (code === 1) {
                this.$notify({
                  title: "成功",
                  message: "密码修改成功，请重新登录",
                  type: "success",
                  position: "top-left"
                });
                this.logout();
              } else {
                this.$notify({
                  title: "失败",
                  message: msg,
                  type: "warning",
                  position: "top-left"
                });
              }
              this.openDialogVisible = false;
            })
            .catch(resp => {});
        } else {
          this.$message("数据格式不对，请按要求填写");
          return false;
        }
      });
    },
    handleCommand(command) {
      if (command == 2) {
        return (this.openDialogVisible = true);
      } else if (command == 3) {
        return this.logout();
      } else {
        this.getManagerInfo();
        this.drawer = true;
      }
    },

    getManagerInfo() {
      this.$http
        .get("/manager/managerInfo/managerId")
        .then(resp => {
          let { data } = resp;
          this.manager = data.data.managerVO;
        })
        .catch(resp => {});
    },
    logout() {
      sessionStorage.removeItem("CR-TOKEN");
      sessionStorage.removeItem("pIdList");
      sessionStorage.removeItem("managerId");
      sessionStorage.removeItem("adminName");
      this.$message({
        message: "退出成功",
        center: true,
        type: "info"
      });
      this.$router.push("/login");
    },
    isfolder() {
      this.isCollapse = !this.isCollapse;
    },
    getNonInspectCount() {
      let managerId = window.sessionStorage.getItem("managerId");
      this.$http
        .get("/apply/noAuthorize/count/", {
          params: {
            status: 0,
            reviewerId: managerId
          }
        })
        .then(resp => {
          let { count } = resp.data.data;
          this.nonInspectCount = count;
        })
        .catch(resp => {});
    },
    getRejectCount() {
      let managerId = window.sessionStorage.getItem("managerId");
      this.$http
        .get("/apply/noAuthorize/count/", {
          params: {
            status: 2,
            reviewerId: managerId
          }
        })
        .then(resp => {
          let { count } = resp.data.data;
          this.rejectCount = count;
        })
        .catch(resp => {});
    },

    validatePass(rule, value, callback) {
      const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,16}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!reg.test(value)) {
        callback(new Error("5-16位，密码要包含数字和字母"));
      } else {
        if (this.managerVO.newPwd01 !== "") {
          this.$refs.ruleForm.validateField("newPwd02");
        }
        callback();
      }
    },

    validatePass2(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.managerVO.newPwd01) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    }
  },
  data() {
    return {
      isCollapse: false,
      adminName: "",
      nonInspectCount: "0",
      rejectCount: "0",
      // 管理员封装对象
      managerVO: {
        mgPwd: "",
        newPwd01: "",
        newPwd02: ""
      },
      // 打开修改密码对话框
      openDialogVisible: false,
      // 校验规则
      rules: {
        mgPwd: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
        newPwd01: [{ validator: this.validatePass, trigger: "blur" }],
        newPwd02: [{ validator: this.validatePass2, trigger: "blur" }]
      },
      //抽屉参数
      drawer: false,
      direction: "rtl",
      // 管理员对象
      manager: {}
    };
  },
  created() {
    this.adminName = window.sessionStorage.getItem("realName");
    this.getNonInspectCount();
    this.getRejectCount();
  }
};
</script>

<style scoped>
.manager-info {
  margin-left: 110px;
}
.center-operation {
  float: right;
}
.el-dropdown {
  margin-top: 10px;
}

.el-container {
  background-color: #f2f2f2;
  height: 100%;
}

.el-main {
  background-color: white;
  /* border: 1px solid red; */
  margin-top: 20px;
  margin-right: 60px;
}
.el-header {
  height: 100%;
  background-color: #24262f;
  padding-left: 0px;
}

.el-aside {
  margin-top: 20px;
  margin-left: 60px;
  background-color: #313743;
}
img {
  width: 60px;
  height: 60px;
  padding-left: 60px;
  border-radius: 10px;
}

.systemtitle {
  font-size: 20px;
  color: white;
  position: absolute;
  margin-left: 110px;
  margin-top: 15px;
}
.el-menu-item {
  width: 100px;
}
.el-menu {
  border-right: none;
}
.folder {
  margin-left: 20px;
  margin-top: 5px;
}

.el-menu-item {
  width: 200px;
}
a {
  color: white;
}
.badge-icon-01 {
  margin-top: 12px;
  float: right;
  margin-right: 40px;
}
.badge-icon-02 {
  margin-top: 12px;
  margin-right: 20px;
  float: right;
  margin-left: 18px;
}

.logout {
  float: right;
  margin-top: 15px;
}
</style>